<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>登录页面</h1>
<div>
  <input type="text" placeholder="用户名" v-model="user.username"><br>
  <input type="text" placeholder="密码" v-model="user.password"><br>
    <!--checkbox:复选框-->
    <input type="checkbox" v-model="user.rem">记住用户名和密码<br>
  <input type="button" value="登录" @click="login()">
</div>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script>
    let v=new Vue({
      el:"body>div",
      data:{
        user:{
          username:"",
          password:"",
            rem:false
        }

      },
      methods:{
        login(){
          axios.post("/login",v.user).then(function (response) {
            if(response.data==1){
              alert("登录成功!");
              location.href='/';//返回首页
            }else if(response.data==2){
              alert("用户名不存在!");
            }else {
              alert("密码错误!");
            }
          })
        }
      },
      created:function (){
        //username=tom; password=123456
        let arr=document.cookie.split(";");
        //遍历
        for(let cookie of arr){
          //将username=tom先带入arr进行拆分判断等操作,cookieArr[0]为username,cookieArr[1]为tom
          // 再将password=123456带入arr进入进行拆分判断等操作  cookieArr[0]为password,cookieArr[1]为123456
          //username=tom和password=123456
          let cookieArr=cookie.split("=");//以=进行拆分
          let name=cookieArr[0].trim();//去除空格
          let value=cookieArr[1];
          if(name=="username"){
            this.user.username=value;
          }else if(name=="password"){
            this.user.password=value;
          }
        }
      }
    })
  </script>
</div>
</body>
</html>